<template>
	<view class="main font-28">
		<view class="flex flex-ai-c" style="color: #666666;">
			<view style="width: 80rpx;text-align: center;margin-right: 40rpx;">排名</view>
			<view class="f1">用户昵称</view>
			<view class="flex flex-ai-c flex-jc-fe" style="width: 30%;">
				<view @click="parames.show = true" class="mr-10">
					<u-icon size="28rpx" name="question-circle" />
				</view>
				<view>贡献值</view>
			</view>
		</view>

		<view v-for="(item,i) in parames.list" :key="i" class="flex flex-ai-c" style="margin: 40rpx 0;" @click="skip(item.id)">
			<view style="width: 80rpx;text-align: center;margin-right: 40rpx;">
				<i-icon type="m" :icon="`paiming${item.no}`" size="60rpx" v-if="item.no<=3" />
				<view class="font-bold font-30" v-else>{{item.no}}</view>
			</view>
			<view class="flex flex-ai-c f1 s-line-text">
				<image style="margin-right: 16rpx;" :src="item.headavatar"></image>
				<text class="s-line-text">{{item.nickname}}</text>
			</view>
			<view style="width: 30%;text-align: right;">{{item.register_num}}</view>
		</view>
	</view>
	<u-popup v-model="parames.show" mode="center" closeable width="80%" border-radius="13">
		<view class="u-text-center font-32 font-bold" style="padding: 34rpx 0 0 0;">排行榜规则</view>
		<view style="padding: 42rpx;">
			<scroll-view scroll-y="true" style="max-height: 700rpx;">
				<rich-text :nodes="parames.nodes"></rich-text>
			</scroll-view>
		</view>
	</u-popup>
	
	<tabbar :current="1" />
</template>

<script lang="ts" setup>
	import {
		reactive
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import common from '../../api/common.js'
	import tabbar from '@/components/tabbar.vue'
	let parames = reactive({
		list: [],
		page: 1,
		show: false,
		nodes: ''
	})
	const ranking = async () => {
		const res = await common.ranking()
		parames.list = [...parames.list,...res.data]
	}
	const sysConfig = async () => {
		const res = await common.sysConfig()
		parames.nodes = res.data.ranking_rule
	}
	const skip = (id: any) => {
		uni.navigateTo({
			url: `/pages/networking/detail/index?id=${id}`
		})
	}
	onLoad(() => {
		ranking()
		sysConfig()
	})
</script>

<style lang="scss" scoped>
	.main {
		padding: 60rpx 60rpx 60rpx 50rpx;
		padding-bottom: 140rpx;
		image {
			width: 64rpx;
			height: 64rpx;
			border-radius: 50%;
		}
	}
</style>